<template>
  <div class="ebook-bookmark" ref="bookmark">
    <div class="ebook-bookmark-text-wrapper">
      <div class="ebook-bookmark-down-wrapper">
        <span class="icon-down"></span>
      </div>
      <div class="ebook-bookmark-text">{{ text }}</div>
    </div>
    <div class="ebook-bookmark-icon-wrapper">
      <bookmark :color="color" :width="15" :height="35"></bookmark>
    </div>
  </div>
</template>

<script>
import bookmark from "../common/Bookmark"; // 书签
import { realPx } from '../../utils/utils' //将rem值转为px值
import { ebookMixin } from '../../utils/mixin'
const BLUE = "#346cbc";
const WHITE = "#fff";
export default {
  name: "",
  mixins: [ebookMixin],
  data() {
    return {
      text: this.$t("book.pulldownAddMark"), // 
      color: WHITE
    };
  },
  components: {
    bookmark
  },
  methods: {},
  computed: {
      // 1 自然下拉 书签页面向下移动
      // 2 当到35高度 和临界值时【这个自己设定】 书签固定到顶部【吸顶】
      // 3 超过临界值后 添加书签成功
      height() {
        return realPx(35)
      },
      threshold() {
        // 临界值
        return realPx(55)
      }
  },
  watch: {
    offsetY(v) {
      if(v >= this.height && v <= this.threshold) {
        this.$refs.bookmark.style.top = `${-v}px`
      }else if(v >=this.threshold ) {
        this.$refs.bookmark.style.top = `${-v}px`
      }
    }
  }
};
</script>

<style lang='scss' scoped>
@import "../../assets/styles/global.scss";
.ebook-bookmark {
  position: absolute;
  top: px2rem(-35);
  left: 0;
  z-index: 200;
  width: 100%;
  height: px2rem(35);
  .ebook-bookmark-text-wrapper {
    position: absolute;
    right: px2rem(45);
    bottom: 0;
    display: flex;
    .ebook-bookmark-down-wrapper {
      font-size: px2rem(14);
      color: white;
      transition: all 0.2s linear;
      @include center;
    }
    .ebook-bookmark-text {
      font-size: px2rem(14);
      color: white;
    }
  }
  .ebook-bookmark-icon-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: px2rem(15);
  }
}
</style>
